<template>
	<div class="main">
		<div class="input">
			<div class="div">
				商品名称:<el-input v-model="name" style="width: 240px" />
			</div>

			<div class="div">
				用户名称:<el-input v-model="intendant" style="width: 240px" />
			</div>
			
			<div class="div">
				手机号码:<el-input v-model="phone" style="width: 240px" />
			</div>
		</div>
		<div class="input">
			<div class="div">
				订单类型:
				<select id="type">
					<option value="" disabled selected hidden>请选择</option>
					<option value="网络支付">网络支付</option>
					<option value="线下支付">线下支付</option>
				</select>
			</div>
			
			<div class="div">
				平台单号:<el-input v-model="id" style="width: 240px" />
			</div>
			
			<div class="div">
				支付时间:
				<el-date-picker
				        v-model="value"
				        type="daterange"
				        unlink-panels
				        range-separator="至"
				        start-placeholder="开始日期"
				        end-placeholder="结束日期"
				      />
			</div>
		</div>


		<div class="btn">
			<el-button type="primary" @click="sai">搜索</el-button>
			<el-button type="primary" @click="delsai">清空搜索条件</el-button>
		</div>

		<div>

			<el-table ref="table" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
				:cell-class-name="tableRowClassName" empty-text="暂无数据">
				<el-table-column prop="name" label="名称" width="220" />
				<el-table-column prop="id" label="单号" width="120"/>
				<el-table-column prop="intendant" label="用户" width="120" />
				<el-table-column prop="pay" label="支付方式" width="120">
					<template #default="scope">
						{{scope.row.pay ? '网络支付' : '线下支付'}}
					</template>
				</el-table-column>
				<el-table-column prop="time" label="时间" width="220" />
			</el-table>

		</div>
	</div>
</template>
<script>
	import mockjs from "@/mockjs/index.js"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	// import * as XLSX from 'xlsx'

	export default {
		data() {
			return {
				name: '',
				intendant:'',
				value:'',
				id: '',
				phone:'',
				tableData: '',
				list: '',
				list2: '',
			}
		},
		methods: {
			sai() {
				if (this.name != '') {
					let msg = this.name.split('')
					this.tableData = this.list.filter(item => {
						for (let m of msg) {
							return item.name.indexOf(m) != -1
						}
					})
					this.list = this.tableData
				}
				if (this.intendant != '') {
					let msg = this.intendant.split('')
					this.tableData = this.list.filter(item => {
						for (let m of msg) {
							return item.intendant.indexOf(m) != -1
						}
					})
					this.list = this.tableData
				}
				if(this.value != ''){
					var time1 = this.getTime(this.value[0])
					var time2 = this.getTime(this.value[1])
					this.tableData =  this.list.filter(item=>{
						return item.time.substring(0,10) >= time1 && item.time.substring(0,10) <= time2
					})
					this.list = this.tableData
				}
				let i = document.getElementById('type').value;
				if(i != ''){
					this.tableData = this.list.filter(item =>{
						if(i == '网络支付') return item.pay == true;
						if(i == '线下支付') return item.pay == false;
					})
					this.list = this.tableData
				}
				if(this.phone != ''){
					this.tableData = this.list.filter(item=>{
						return item.phone == this.phone
					})
					this.list = this.tableData
				}
				if(this.id != ''){
					let msg = this.id.split('')
					this.tableData = this.list.filter(item => {
						for (let m of msg) {
							return item.id.indexOf(m) != -1
						}
					})
					this.list = this.tableData
				}
			},
			delsai() {
				this.name = ''
				this.phone = ''
				this.value = ''
				this.id = ''
				this.intendant = ''
				document.getElementById('type').selectedIndex = 0
				this.list = this.list2
				this.tableData = this.list2
			},
			tableRowClassName({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				// 把每一行的索引放进row和index
				row.index = rowIndex;
				column.index = columnIndex;
			},
			getTime(time) {
				var date = new Date(time);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let time2 = y + '-' + m + '-' + d
				return time2
			},
		},
		mounted() {
			this.tableData = mockjs.getTradeInfo()
			this.list = this.tableData
			this.list2 = this.tableData
		}
	}
</script>

<style scoped>
	.main {
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		flex-direction: column;

	}

	.input {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.input .div select {
		border: 1px solid #ebeef5;
		width: 237px;
		height: 32px;

		color: gray;
		outline: none;
		text-indent: 5px;
		margin-left: 5px;
	}

	.input .div:first-child {
		margin-left: 15px;
	}

	.input .div {
		margin-left: 50px;
	}

	.input .div div {
		margin-left: 3px;
	}

	.btn {
		margin: 20px 20px;
		display: flex;
	}

	.header .el-button {
		margin: 0;
		border-radius: 0;
		border-bottom: 0;
	}

	.header .el-button:active {
		color: aqua;
	}


	label{
		text-align: center;
	}
	.label{
		color: #95b1e6;
		background-color: #ecf4ff;
		width: 55px;
		float: left;
	}
	.label2{
		color: #8fbd79;
		background-color: #f1f8ed;
		width: 55px;
		float: left;
	}
</style>